<template>
	<div class="yolo-model">
		<div class="menu">
			<div class="menu-item" v-for="item in menus">
				<div class="menu-item-name">{{item.name}}</div>
				<div class="menu-item-children" :class="currentMenu === child.key && 'active'" v-for="child in item.children" @click="menuHandel(child.key)">{{child.name}}
				</div>
			</div>
		</div>
		<div class="content">
			<YOLO v-if="currentMenu=== 'YOLO'"/>
			<CheckCharts v-if="currentMenu==='CheckCharts'"/>
			<VideoRecognition v-if="currentMenu==='VideoRecognition'"/>
			<ChechHistory v-if="currentMenu==='ChechHistory'"/>
			<CourseImages v-if="currentMenu === 'trainProcess'"/>
			<RealTimeRecog v-if="currentMenu === 'realTimeRecog'"/>
		</div>
	</div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

import YOLO from './component/YOLO.vue'
import CheckCharts from "./component/CheckCharts.vue";
import ChechHistory from "./component/ChechHistory.vue";
import CourseImages from "./component/CourseImages.vue";
import VideoRecognition from './component/VideoRecognition.vue'
import RealTimeRecog from './component/RealTimeRecog.vue'

const menus = ref([
	{name: '图片区域', children: [
			{name: '图片检测', key: "YOLO"},
			{name: '识别历史', key: "ChechHistory"},
			{name: '检测报表', key: "CheckCharts"},
			{name: '训练过程', key: "trainProcess"},
		]},
	{name: '视频区域', children: [
			{name: '视频检测', key: "VideoRecognition"},
	]},
	{name: '实时区域', children: [
		{name: "实时检测", key: "realTimeRecog"}
	]}
])
const currentMenu = ref('YOLO')

const menuHandel = (key:string)=> {
	currentMenu.value = key
}

</script>

<style lang="scss" scoped>

.menu{
	height: calc(100vh - 60px);
	width: 240px;
	border-right: 1px solid #303133;
	overflow: -moz-scrollbars-none;
	cursor: pointer;
	&::-webkit-scrollbar {
		width: 0 !important; /* Chrome/Safari */
		height: 0 !important;
	}
	.menu-item{
		.menu-item-name{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			font-size: 18px;
			font-weight: 600;
			background: #fff;
			box-shadow:
				0 -4px 6px -2px rgba(0, 0, 0, 0.1),
				0 4px 6px -2px rgba(0, 0, 0, 0.1);
			padding-left: 10px;
		}
		.menu-item-children{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			padding-left: 30px;
		}
		.active{
			background: #409EFF;
			color: #fff;
		}
	}
}

.yolo-model{
	width: 100%;
	height: calc(100vh - 60px);
	display: flex;
	.content{
		flex: 1;
		height: 100%;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
	}
}
</style>
